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Introduction 

elcome to Modular Dreams MD+F Web Animation Kit. This 
program has been designed to provide tools and features for 
creation of exotic dements for World Wide Web designers as well 
as provide means of storing the environment used to create them. You can be 
a graphics arLisl ora computer scientist; you will still find this program 
giving yon the tools needed for the most difficult web animations. 

MD+F Web A K was build to provide a easy tools ranging from an easy to use 
C J E 1 Animator which you can simply drag-and-drop your image frames ail die 
way to a fu 1 ly multita sk i mg C++ sty 1 e 1 n n gu age. A nd with i ts exclu si ve 
Col lapse and Resurrect feature, you can share your creations with others like 
never before. 

About Lb is manual 

I he MD+F WebAK User Guide provides information on using the MD+F 
WebAK program as well provide simple tutorials for the WebAK scripting 
language. For more detailed information on the scripting features of this 
rirojiuim. please obtain the MD i F WebAK Prop-trnmer s Guide which is 
available in the electronic format from Modular Dreams Ene’s World Wide 
Web home page. You can also find more animation samples or collapsed 
environments (described elsewhere in this manual) atom Web site. 

This manual assumes you have knowledge of World Wide Web page design 
features such as GIF Animations or Imagemaps but does provide a brief 
description of Won! Wide Web items when they are lirsl discussed. If you 
need more information oil such subjects, please drop by our sire's Support 
page. That page provides links to many sites which describe World Wide 
Web page design features as well as various Web Browsers for both novice 
mid more experienced users. You will also find some interesting GIF 
animations there wh ich you cun grab and load to learn new tricks or to reuse 
on your own web pages. 

Learning to use WebAK 

If you are familiar with any other Modular Dreams’ SX based graphics 
program, you should be able to become accustomed to MD+F WebAK very 
isisily. All MD+F SX programs provide the same features such as the 
vrr.;Mi le Image View Canvases or the same powerful interface to filtering or 
1 1 1 1 i ■ 1 windows. If mu. we suggest you rend I he chapters in (his book in 
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Hie order they are provided. And yon may with to skip more specific 
subjects which yon may not ear e. Si nee this program provides a consistent 
user interface on all oi its tools, once you have learned one, many parts of 
other tool s w i 1 1 al ready be trim i 1 ia r to you . 

Using examples 

Many of the examples given in this manual are accompanied by collapsed 
environment files, (.sxo SX object LlEe) To load any of these files for viewing 
you will need to select the nie>Objccts>MesurrecL.. menu item and select 
the file or enter iis path and name. Once you do this and press OK, Lhe 
windows and images described in the example will be opened and displayed 
for you. 
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Chapter 1: Starting WebAK 


K nee you run the MD+F WebAK program, you will be presented with 
the WebAK main window. This large window contains menus and 
buttons which let you slarl various WebAK tools as well as an 
information area, at the bottom of the window, where ft will display important 
a i sd useful information on the actions which are taking place. The toolbar on 
lop as well as the information area aL the bottom are both optional . You may 
wish to disable one or both for more working area. 
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l hr controls on the main window are: 

Mm a bar ■ The application menu bar lets you start new windows, change 
options, etc. 

Win king area - This is the large white area which will contain your windows 
mul dialogs. 

i mu ni image views These two small images - at ibe bottom left hand 
eo rile i let yo u v ic w i lie i ma ge you are work i ug on as we 1 1 as its Alpha 
channel . Th ey arc great fo r I cl ling you k r i > w w h ic h w i udow a ny ope ra- 
tloni you uiv performing will effect as well as give you the full picture if 
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you are just working on a part of it. 

Image ami Info status Lines - These two status lines display information on 
the image anti the operation you arc performing. 

Tasks status - The tasks status display shows you how many short-term 
tasks are in progress. 

Should you wish, to disahlc or change the placement of rhe tool bar or the 
information bur, select theOptiims>GeneraL.. menu, iicm tor the General 
Options window. You can also drag the toolbar to float it or to move it to one 
of the other borders. 

Welcome Window 

h] addition to the main window, the Welcome window will be displayed Lhc 
first time you start the application. The Welcome window gives you quick 
access to the more popular actions you may perform, as well ll:s give you a 
way to quickly exit WebAK. 



The controls on the Welcome window are: 

Imajjf Editor - This button will display a file dialog. You can then select a file 
arid have it be displayed in an Editor Window. 

Resurrect - This button will allow you to resurrect a previously collapsed 
WebAK environment. 

GIF Animator - For easy GIF animations simply select this button. It will 
display the GIF Animator which you can load, view, or save GIF anima- 
tions with. 

Close - Select this button to close the Welcome window. 

Exit - This button will close the WebAK application. 

If you wish, you can configure WebAK *0 that the Welcome dialog is 
automatically removed once the application has started and loaded all its 
subsystems. To do this, select thcOprioiis>Generai... menu item for Lbe 
General Options window. 
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Chapter 2: Image View Canvas 

nc of the visual items which you wilt see and interact with oil many 
0 f M D+ F Web A K "5 wind ow : s 
and dialogs as Lhc Image View 
Canvas. They are everywhere: They can 
be found and are used on the simplest 
tools and all the way to the GIF Animator 
and 3 J aUcm Generator windows. 

1 1 ) atgc View Can vases am very powerful 
1 iliic L ts which you must l earn ro use before you can use most of We bAK. 
tools. Fortunately, Lhat is an easy tiling. 

What is art Image View Canvas 

An I mage View Canvas is exactly what its name says: A canvas which lets 
you view an image. 


Ail empty Imago View Canvas 


'I m ys$ 

An Image View Canvas 



I mage View Canvases arc: 


* t f seal Ly very small. 

* Mhown singly or in pairs. When in pairs, The pair display both an Image's 

image data and its Alpha channel. 

* Displaying an image. When an linage View Canvas is showing an. image, it 

will scale it and show a 70 by 70 or a 140 by 140 representation of it. If an 
[mage View Canvas does not con Lain an image, it will display slauc. I fan 
Image View Canvas is showing an image, it may bo showing the same 
image as another Image View Canvas. If that is the case, they arc said to 
he linked . 

In in ge View Canvases arc used to: 

* Represent images which are sources ro or results of image processing 

operations, 

" I k d d mm ges . This pre ve nts cluL l tiring of y o ur work area , 

■ Show individual frames in an animation. 

1 w ■ i his in oilier places where images need to be represented. 
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Using an linage View Canvas 


There are two ways to us? an Image View Canvas: 

I - Von can use the mouse to pop-up a si Image View Canvas* menu and 
sc loot a m en u item, i yr 

2- You can drag and drop its content. 

Using an Image View Canvas’ pop-up menu 

An Image View Canvas’ pop-up menu lets you load images into it. create 

other views into iL, display different channels (Image or Alpha) or close 

the image it hold. The menu items are: 

Open Image - To open a new image into the Image View Canvas, select this 
menu item. It will display a File dialog which yon can use to select your 
file 

Shadow Image - When you shadow - an image, you create another view into 
it, Select this item to create an Editor Window displaying die image. 

Clone I mage - When you dose an image, you create another copy of it. 

Sc led this ilem Lu create an Editor Window displaying another copy of 
the image. 

Show> Raster - Select this menu item to show the 'Tmage^ channel of your 
image. The image channel is what is normally shown, ft is a I to 8 bit 
indexed, 24 bit. or 48 lit image. 

S ho w> A I ph a - S? Ieet thi & menu item to show the A1 ph a” channe l . T he 
Alpha channel ss a 1 or 2 byte image channel which specifies the opacity 
of the image. In WebAK, any Alpha channel value other than full opacity 


Load a new image 

Shadow this image 
Clone this image 


Show image Raster or Alpha 


Pick image (for replacing another) 
Put image (to replace this) 



Unlink and close this view 
Close this and all other shado 
Close this and remove from drive 



■lenul 

Open Image... 
Shadow InarjA 
Ckine Jihngss 

r dhui.J 

Pick Image 
Put inaqn 
dtisfl Viadnw 
Close Irrage 
CIoe€ arx3 Delate 


Rastcr 
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linage data as held internally 
by Web A K. This data is n ot 
affected if you zoom an image 
or if its colors need to be 
i ei i lapped before being 
displayed on the monitor due 
to system configuration. 



Image as shown on the 
WebAK main window, an 
Editor Window or ail Image 
View Canvas. 



: litre are two views and tw o separate images after Cloning... 



Ilu 1 1 . 1 .iK - 1 wo views showing the same image after Shadowing... 
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i n tl i cates a trail sparent i m aye . 

Pick Imaye - Picking an image is like dragging from the Image View Canvas. 
Use the PliL [mage menu item to drop the picked image. 

Put image - Put Image performs the same action as dropping an image onto 
the canvas. You can use Pick and Put wheel you arc dragging from otic 
source to many targets. In such a ease, you can Pick once and Put many 
times. 

Close Shadow - Use this menu item to close this view to the image. 

Close Image - Use this menu i rein to close all views to the image. 

Close and Delete - Use this menu item to efose all views to an image and to 
remove (delete) it from the disk 


Usiny an Image View Canvas 
with Drag-and-Drop 

To use the drag and drop 
feature of Image View Can- 
vases, pick up an image from 
an Editor Window, an image 
from ail Image View Canvas, or 
a Bitmaps file and simply drag 
Lo the target and drop it there. 
Make sure you hold down the 
correct keys for the action you 
are performing. 


You can use drag-and-drop to link the input and output of image operations. 
For example, you may want to Enhance and then Negate an image. You can 
shadow your image from the Editor Window into Enhanced source Image 
View Canvas, drop a copy and into its target and link that witli Negate 1 * input 
linage View Canvas, drop a copy into Negate s target Lind then shadow it. 
Now, any changes made to the input image will be enhanced and then 
negated on the output image using the two linked Operation Windows 
because of the way you connected their Image View Canvases, In the picture 
below, the straight lines represent Linked images: 


Move and/or Copy 

When you move or copy an ini n ye. 
you wi 1 1 be creating a new copy (a 
clone) of dial image in the target 
Image View Canvas. 

Link 

When you link an image, you wil I be 
creating another view into that image 
(shadowing it). Both Image View- 
Canvases, and any others linked, will 
be displaying the same image data. 
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Chapter3: GIF Animator Window 


T 


I he GIF' Animator window displays GIF' animations and can be used lo 
load and take apart or examine GIF animations you obtain from the 
World Wide Web as well as save GIF animations to place on the 
World Wide Web. 
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I outline GIF animation files 

In load a GIF animation select the Filc>Load... menu item and use the Etc 
dialog to open the GIF file. Once the file has been opened, its frames will be 
di splayed on the bottom. Each frame will have its own Image View Canvas 
si i that you can manipulate them individually. 

Grabbing and saving a frame 


l'u save an indi vidual frame, simply use the image View Canvas to either 
shadow or clone it itno a window. One^ you do this, you can use the 
I'Ht^Siive As... menu item on the WebAKmain window' to save dial frame. 
You can also drag-and-drop the frame onto an Editor Window for saving. 

I in example, lets say you need Lo save a copy of the first frame in an anima- 
tion To do that, after loading the GIF file: 

I Move the mouse over to that frame. 

Press the right mouse button for the pop-up menu. 

1 Sdcci Shadow Image. WebAK will display your frame in an Editor 
Window. 
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4 - Save il just as you would any other image being displayed or an Editor 
Window. 

Adding frames In an antmalrtm 

l0 a[1[1 a frame to your animation, create a blank ceil for it by using the frame 
modification pop-up menu. This menu is accessible from the gray area 
surrounding each of the frame Image View Canvases. SimpJy pop- this menu 
up and insert new animation frames. You ean then use the standard image 
View Canvas menu items or drag-and-drop your frame's image. 

You car add images (or remove them) at any time, even when the animation is 
being displayed. 

Modifying frames 

When you load a Gil-' animation or have created a new one by adding frames, 
yon will normally need to access each frame’s settings To do this, use that 
framed pop-up menu (located around its Image View Canvas) and select the 
Vlodify menu item. The global attributes and tirnt frame's information and 
sellings will be displayed to the right side of the animation window where 
they can he changed 

Each GIF animation has the following global attributes: 

Size - A GIF animation file should be large enough Lo fully contain all the 
frames it displays, When you stn it creating a GIF animation, WebAK 
will start with a very small GIF size and enlarge it as your frames increase 
in size. This action is performed when you press the Play button or when 
you save the animation, if you wish to change this value or would like to 
enter a value larger than the area covered by the animation frames, you 
can do so thru a menu item. 

Cycle - Select this item if you wish the GIF to contain a NF,TSCAFli2,() 
ext en si on b lock. I his block will spec ify ho w m any times the a n ima lion i s 
cycled. If you do not specify this option, the GIF animation is lo be 
shown only once. 

Cycle Times - Enter the number of times a GIF animation ls cycled (restarted 
from beginning) m this field. A cycle value of (J means that the animation 
should be shown once and not cycled and shown again. Note: Some 
Web browsers will stop an animation at either the Inst or the first frame 
after a set amount of lime has passed even if the cycle times value you 
specify has not been reached. 

{.In ha I f uni men t - I his field shows the global comment contained in a GIF 
. animation. Since many programs will loose all but the first 255 charac- 
ters of your comment or display comments more than 255 characters in 
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length in varying ways, you may wish to limit it to less than that many 
characters. This also applies to the comment attached to each frame. 

Each animation frame has the folio wing attributes: 

Position - These two fields specify the coordinate where a frame is shown. 
Position (0, 0) .specifies the top-left comer of the GIF animation. Gener- 
ally, your animation's first frame has (G, 0) for its position and (width, 
height) for its size. The following frames would then specify the comers 
of the rectangular urea where a subframe is to be drawn or the same (0, 0) 
and (width, height) values if the frame is full sized. 

Size - These two fields indicate the size of the frame. You can not change 
them: they are the same values as the image’s width and height. 

Delay - 1 he delay field specifies., in milliseconds, the delay time before a 
fmme is drawn. The first time that the GIF L s first frame is shown, this 
value is skipped for that frame. The value you enter will be rounded to 
the next highest value accepted by the image format. This is 1 0ms for 
GIF animations. 

Disposal - Disposal indicates the method yon wish to use to remove each 
frame once it has been displayed. The disposal methods are "Unspeci- 
fied ", "Don't Dispose", "Restore Background”, and LL Re store Previous”. 
Almost all GIF animations use the “Don’t. Dispose’ 1 method since it is the 
fastest to display and the only one supported by the more popular Web 
browsers. The method “Don't Dispose" means that the image should not 
be disposed of. When used, each frame will simply be painted on top of 
the previous one which means that you will see whatever was shown 
before thru the transparent areas of your image. "Restore Background"’ 
will paint the new image and fill any transparent areas with the back- 
ground color. ''Restore Previous" will show whatever was painted before 
Ihe frame was drawn. The only exception being the last frame; its 
generally believed that if a Web browser implements this feaLune, disposal 
of the last frame will result in the painting of die first frame in the 
animation only. Its strongly suggested that you only use Lbe M 'Don’t 
Dispose" disposal method for GIFs placed or the World Wide Web. 
Resurrect the collapsed environment file disposal. sxo ibr three GIF 
Animators which contain an example of each of the three specified 
methods. 

Sizing -This control lets you specify how each frame is sized when it is 
saved. You can specify “None^ “Auto-Crop 11 and “Expan d-and- Store 1 " 
Spedl'y "Attto-Crop” to automatically crop the areas of your frame which 
bus not from the previous drawing. The cropping feature does rake the 
disposal setting into account when deciding what extra pixels need to be 
cropped, “Expand-and-Stone” will expand each frame to full size before 
sloring it You will usually never want to do this unless you need to show 
Gil’ animation on a much older ( fiF animation viewer which requires full 
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id zed frames. 

Coloring - Ibis control lets you specify how the imaged colors are to be 
handled. You can use this to specify whether the frame may use the 
global eolonmp or the one supplied by the image. This is only an 
optimization control and will not affect the look of your image, 

Mas colors - Should art image have more colons that allowed by Lhe GIF 
specification (25 ti or 255 colors), it will be remapped to have fewer 
colors. You can use this control to specify even a fewer number color to 
achieve smaller file size. 

Cell Comment - This field shows the comment attached to the frame you arc 
modifying. 

Viewing animations 

You can view animations hy pressing the VCR style play button. When you 
do this, Lbc animation will be played frame by frame and will be cycled if you 
have selected that option. (The cycle option is in the modification area: see 
above) To stop the animation, press the play button to unlatch it. You can 
also see the next or previous frame by using the two step buttons. (Do not 
uhc: the backstop button unless you arc using the ’“Don't Dispose” disposal 
method for all your frames and you should let the animation cycle once fully 
after making changes if any frames were added, removed, or modified) 

When using WebAK's GIF Animator window to animate your frames, please 
take notice that: 


1 - J he animation speed, specially for very fast animations, may be some- 

what different than Netscape's or other Web Browsers. 

2 - The frames displayed by the GIF Animator may have more colors in them 

than allowed by the GIF Jile format specifications. In addition, on many 
systems and graphic card configurations, Netscape or other Viewers wil I 
use a specific set of colors to display the image, as well as dither it in a 
user specified way. 

3 - WebAK supports more disposal methods than most Web Browsers, 

including Netscape, support. If you use such disposal methods, your 
animation maybe completely different than you expect when you finally 
add it to a Web page. Also, a badly made animation obtained from the 
World Wide Web may display incorneuLly if it was specifying an unsup- 
ported disposal method and assuming that that setting was being 
ignored. 

Because of the reasons listed above, you sh ould always test von r animations 
with Nets cape on a few different computers befor e u sing them on a We b 
pa ge. 
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Saving GIF animation Jilts 


I'o save an animation you've created, select either the Files Save „ r the 
!■ HoSave As... menu item. When you da thin, each of your frames will be 
readied and saved to disk. Since Ibis step may Lake some time for animations 
with many frames, a window will be shown displaying the progress of the 
save. Because of WebAK ’s multitasking design, you do not need to wait for 
ibe save to finish but you should make sure that you do not modify my of 
i he frames being saved. 

A I Ler the GIF animation is saved, you may also wish to collapse your 
environment so you can bring back your GIF Animator Window at a later time 
without having Lo setup the frames again in. This ts specially important since 
■' saved GIF fi le may have its frames crop ped and optimi zed (opt tonal i n s well 
a* h ave iheir co lor s reduced to the number allo we d by GfF sp eci fications 
wtisn s aved. Alway s k eep Lhe orig inals. For an example of these changes 
^ee the changed, sxo file. Resurrect this file and try saving the animation and 
i hen loading it in another GIF Animator window to see how it was changed, 
You will need a 24-bit display to properly observe the changes. 

Testing GI F animations with a Web Browser 


f o lest your GIJ- animation with a browser such as Netscape, either enter the 
file location in the URL. field or create a small HTML tile such as: 

<HTML> 

IMG SRC=”C: TLbTGIF^> 

</l ITML> 


■iud open il in the browser’s URL field. By using a HTML file, you can tiy 
vour GIF in front of different backgrounds or show multiple GIFs at the same 
lime, 

;VWf ■ Netscape locks and toads the Image on every cycle if you use a file 
iiHine. i f you try to save at the same tile location Lhat is being displayed, your 
i.ivv fiction may fail. 

I vsiiu^ a GIF animation for download behavior 

M.iny Web sites- (mostly commercial sites) have started using GIF animation 
nli long playing l ime for advertisement purposes. These GIFs usually 

I I min in hundreds of frames and while you browser a page, display one 

1 1 " ' ■h' 1 ' a I lei another. When designing such animations, two assumptions 
hi iMnde: 
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1 - The visitors browser is capable and configured to display GIF animations 

as they are being downloaded, and 

2 - The download sliced is fast enough to load images ahead of the time they 

are requi red Lo be show n. f h is way, no matter bow 1 ong the G E F an ima- 
lion is, its frames are loaded just ahead of the time Lhey are displayed. If 
the animation is too last. or too large for the download speed, it will not be 
very attractive and if ir is loading much faster than being shown, il 
probably could have been made larger and more i meres ling. 

For such advertisement GIFs (which, in our opinion, are as annoying as GIF 
animation can get and can be confusing depending on a browser's preference 
setting) or for situations where smaller GIF animatiotis should properly 
display while being loaded, you can rest them with the Download Frame 
Tester (DF Tester) tool. 



Using the Download Frame Tester 

Once you have created a GIF animation whieh you would like to tcsi: 

1 - Save your GIF animation. 

2 - Open the Download Frame Tester window using the U til iles>DF! ester.,. 

menu item, 

3 - F, Titer the C 3J F name and bytes per character value you would expect most 

of your viewers will achieve. 

4 - TressOK. 

Ihe DF Tester will then start simulating a down load of l hat speed and 
measure how long extra waiting time (i f any) n look before each frame is 
shown. This simulation will [ake only a few seconds and then the results are 
displayed. You can use the displayed results to reduce the extra delays which 
may badly affect your GIF animations presentation. The DF Tester will also 
indicate how much faster or slower than the nominal speed the whole 
animation loaded and allow you to globally iesL Ihe GIF by changing all its 
size or delay value* by a percentage. 
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Chapter 4: Editor Window 


E 


ditor Windows are the windows oil which you can perform basic 
editing or mod i flcaL ion ^ to your i m age . Whenc ver you 
open an image tile using Web A EC or perform a Clone or Shadow 
operation on ail image, a new Editor Window wail be opened and the title of 
un Editor Window will display the name of The image it displays, (if it has a 
name) 


rnwLnimwM^m' 

nST^i 




I be Editor Window's toolbar, shown in the above picture is optional. To 
remove it select Optkms>General... for the general options window and set 
its setting to IN'ime. 

I lie editing features provided by an Editor Window are: 

- { hanging an image data format such as bits per pixel, 

* i Teation of an image raster or an Alpha channel from the other, 

* Resizing of the image, 

■ i Topping of the image. 

4 Rotating it. 

.i ; well as saving it in a different format. 

< Ipcning Editor Windows 

I " open an image in an Editor Window, select LheFi3e>Opcn,., menu iiem and 

■ boose Ihe file to be loaded in the file dialog. WebAK w ill attempt to load 

■ i a. .Uli spiny the file and will either show you your image or display a large X, 

\ In.i'.r X is tin indication that there was a problem with your image file. 

w, ■ S i j ice n ins I on i nmon fl I e formats ( s uc h as { 3 1 F, J PEG . I F Ffl LEM, or PN G) 
• |! ■■iipportcdp a large X will usually indicate a damaged file. 
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Once lbe file si loLided or Xed out, you can create additional views into it by 
using the window’s pop-up menu and selec ting Shadow Image for additional 
Editor Windows displaying Lbe same image data. 

Viewing at different zoom levels 

To view the image at a different zoom level, enter the percentage value into 
the field in the Editor Window's tool bar or use one of lbe menu items to 
modify 1 that value. Enlarging line zoom level is specially useful when working 
with small images commonly used on World Wide Web pages. 

Changing image or Alpha channel format 

An image's data can be in one of die following three formats: 

■ K bit indexed (with a color palette) 

* 24 bit true-color 

* 48 bit precision true-color 

In addition, the S bit indexed format can be created to contain only black and 
white or grayscale colors. You can switch between any of these formats by 
using the Palette>Con vert To menu items. 

The image's Alpha channel can also be contained in two different image 
formats: 

- 8 bit (256 levels) 

■ 1 6 bit (65 5 j 6 levels) 

To change from one formal lo another, use dieImagc>Alpha>Convert To 
menu items. 

Creating image or Alpha channel data 

There are times when it would be useful to create an Alpha from the ini age 
data, (or vice versa) To do that, use tbclmage>AlpJia>Gmeratcmenu items. 
Normally one would use Lb is technique with images from painting or drawing 
programs which do not support direct manipulation of an image’s Alpha 
channel, 

In addition to the ability to create an Alpha channel from Lbe image raster 
data, you can create full Alpha channels (fully opaque images) as well as 
empty Alpha channels (fully transparent). Use the 

J i nagOAIpiiaX rime ra I v> bn II or 1 1 na Alp li aX JeneratO Krnp ty 1 1 tet hi. items 
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for that- By default, unless an image file contains Alpha channel information, 
Lbe image will be assumed to contained a full Alpha. 

Changing image size 

To resize an image or resize the canvas of an image, use the Rescale window. 
This window lets you create new images which are smaller or larger than the 
current image or you can select to keep the image the Kamo size but expand 
Or shrink if s canvas area. 

Resizing an image 


To resize an image, enter its width or height, either in pixels or in percentage 
change, in the Width and Height fields and then press Rc scale. A new 
editor window- will open and display a clone of your image with the dimen- 
sions you speci bed - 

Residing a canvas 

To resize the canvas your image is 
drawn on without resizing the image 
itself, enter the width and height of 
the desired canvas, select the expand 
option, and then press Resale. A 
lie vv edi tor w i ndo w vv i 1 1 open an ri 
display a clone of your image on a 
can vas o f the spec i \ 1 et 1 si ze . Wh en 
resizing a canvas, you can either keep the image centered or align it to one of 
lbe sides or comers of the new canvas. A centered image is the default but 
to do an alignment, press the Alignment button until the desired alignment is 
shown. If you do this and follow it by pressing Rescale, the unage canvas 
wi 1 1 be expanded or shrunk (and clipped ) in the opposite direction of your 
selection. 

Making precise size adjustments 

I lie Rescale window contains two sets of entry fields for you to specify or 
i ! u id i Fy your i mages di m en si t ms: 

I file Width and Height absolute size fields which indicate the resulting 
image's width and height. 

1 Hie Width and Height percentage Fields which indicate the resulting 
image's width and height as a percentage of the source Image’s width and 
height respectively. 
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’1'ou can however use these lie Ids to specify the desired dimensions in a lew 
other ways: 

Absolute size change - To specify change in dimension, enter Hie amount of 
change, such as+J Oor-10 into the absolute size fields. For example, to 
add 20 in each direction to a 1 024 by 763 pixels image, you can enter +20 
into the Width and Height fields. WebAK will then calculate and display 
] 044 and 7BB in those fields and also update the percentage fields. 
Percentage change - To specify change in percentage, enter the amount of 
the change, such as +25% or -25% into the absolute size fields. For 
example, ro make a 1024 by 763 image 25% smaller in each direction, 
you can enter -25 into the Width anti Height fields. Web AX will then ? 
calculate anti display 75% in each of those fields (assuming they were 
100% ) and also update the absolute size fields. 

Cropping the image 

i'u crop an image, you must select a rectangular area of it and Lbcn select the 
Tools^Sel ecti on> C r o p menu item, ib select a rectangular area, you should 
be in the arrow mode which you can access Lhru Tools>Arro w. Once you 
have selected an area, you can resize a pixel at a Lime by clicking close to ns 
edges or remove the selection by using Tonis >Sclectiim> Kill, You should 
not leave a selection on a window unless you intend to use the selection. 

Rotating or mirroring the imago 

For most image processing operations you will need to use an Operations 
Window, however, since notating ati image in 90 degree angles or mirroring it 
is a common operation, you can perform them directly within an Editor 
Window. Use the rotate or mirror menu items at the Image menubar to 
perform these actions. 

Saving fhe imago 

Once you have modified an image, you can save it bv selecting die Filts>S u yp 
or F] r le>SavcAs... menu items. The image will be saved using the same file 
format that it was loaded in. unless you change ii. 

File name extension 

The WebAK application ignores an image flics extension arid checks the 
actual image data to derive at its file format but there are many popular 
applications do not do that. It is recommended that you llsc the standard 
“fifename-exf > format without any unusual extensions. In addition, you 
should take caution at using more than one **** or the characters space, H4 #”, 
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T, T, TV V, 11 or . The problems 

you may encounter with these will not only depend on ibc operating system 
which you are using while accessing one of these images but also or your 
individual appl i cations. For example, many programs written by 1 13 M have 


trouble with extra periods in a file name and many UNIX programs have 
trouble with Again, it is recommended iha! you use the standard 
"filename. ext’ 1 format without any special characters. 


Saving images, WebAK style 


< )ne of Web A K ’s unique features is its ability to Collapse and Resurrect 
environments {discussed later in this manual) Ry using the Collapse and 
Resurrect features, you can save your image while it is still in its Editor 
Window or in an Image View Canvas located on an Image Holder or an 
Operations Window. You can also store a large number of images in one step 
by using Collapse and Resurrect. You may wish to use that feature for better 
management of images, specially images which you are using in your current 
work and will not be stori ng for the long term. 

You will see examples of tills in many of the collapsed environment fdes 
supplied by MD+F. Jn many cases, those fi les contain image daLa and may 
even contain the name of those image tiles (such as image_backi.gif 5 ) but 
arc not shipped with the individual image tiles. 

.Since many of the objects as well as the Collapse and Resurrect features 
miked about in this section are covered by other parts of ibis manual, you 
need to wait until you have read those sections before deciding what is the 
best way for your short-term image storage; however, please try resurrecting 
I Itcsc three collapsed environment files for a quick example: 

* editimg.sxo- Three image stored in Editor Windows. 

* hutdimg.sxo - Throe images stored in an Image Holder. 

* Uumimg.sxo- Three images stored in the Operations Window which 

created them to begin with. 

■md if you wish to load the images the old fashioned way: 

■ u d.gil, greemgif, hEuc.gil - The Three images in individual fdes. 
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Chapter 4: Operations Windows 


M 


I D+F WebAK. provides a number of image operation ('tillers and 
e ffec ts ) windows. \ he se vvindo ws c an perform si n pi e operali c ms 
such as negating ail image nr as complex aw merging two images 
based on the intensity of a third one. Fortunately, the interface to these 
Operations Windows is very consistent from one Operations Window to the 
next and once you have mastered how an Tnuige View Canvas works, yon 
should be able to use them without much trouble, 

A typical operations window 


Pmmstor 
t OClttoIlH 


r.rcriijver: 


i Ucpivata chpnneK 


IjlJlh f 



" Source linage 
' Target irnajc 


Apply Operation 


Imh t lie fol ] o wi n g compon en t : 

rura meter Controls - This area holds a number of controls which effect how 
i lie operation is performed- The controls effect parameters such as the 
intensity of the operation being performed. 

Sumee Image View Canvas - This, image view canvas contains the source 
imago used in the image processing operation. 

1 .1 i Image View Canvas -This image vie w canvas contains the results of 

llu- (mage operation once it has been performed. You can either save your 
■vsults or link this Image View Canvas to another Operation Window's 
source Image View Canvas to link the effects. 

^|iph [ his button needs to be pressed tor the operation to be performed. 
ISnlc LllJli ti^re are some exceptions to this, specially when operations are 
linked. 

Messing this button will save the values in the Operation Window’s 

rnnlmK and closes its window. The values contained in the window will 
!<-■ Nu-d Hie next time you open an Operation Window for the same filter 
04 died. 
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Opening an Operations Window 

To open an Operations Window, select die operation you would like to 
perform from the menu items contained in the [mage menubar. Once you do 
that, an ( Operations Window of that type will be opened. For example, if you 
select the linage >JJriglmi css menu item, a Brightness operations window 
will open. 

Using an Operations Window 

The steps for using atypical Operations Window are as followed: 

1 - Specifying a source image. You will need to either drag-and-drop your 

source image to the source Image View Canvas or use that Image View 
Canvas’ pop-up menu to open an image into it. 

2 - Specify' a target image. This is the image which will be overwritten (or 

partially overwritten in some eases) An easy way to create if is by drag- 
and-droppitig a copy of the image contained in the source Image View 
Canvas into it. 

3 - Fnter operation parameters Modify die parameter controls to your 

liking. If any of the parameter controls are Image View Canvases, drop 
your control images into them, 

4 - Perform the operation. Press the Apply button. 

Now. you can drag-and-drop the results of the operation from the target 
Image View Canvas to whenever you wish. 

Resurrect operwjn | ,sxo for an example of this. Notice how the two editor 
windows are linked to the Image View Canvases of the Operations Windows 
and how by changing the Operations Window’s controls, you effect the 
resulting image in its target Image View ami the corresponding Lditor 
Window. 

Linking Operations Window 

[.inking Operations Windows allows you Lo perform more than one operation 
on an image. The usual way to do this is to setup any number of Operations 
Windows as instructed above anil then link LargcL Lo source Image View- 
Canvases between ihe operations. Then, [he first operations window linked 
contains the unlinked source and the last Operations Window linked con- 
tains the unlinked target. 

.Resurrect operwin2.sxO for an example of linked operations window. Try 
changing the parameter sellings on the Operations Windows and pressing 
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the Apply buttons to see how things they are linked. 

W h en jinking Image View Canvases, you should never create cond itions 

wher e there are loops i n between your windows or in-between the Image 
View Canvases of the same window. Such loop s are nor suppo rted by ibis 
pro duct. If you decide that such a loop is necessary and useful in a large and 
complex linked operations setup, you may use them but you should be aware 
of the risks as demonstrated above as well as change of behavior in future 
versions of the product. 

Once you’ve mastered using Operations Windows and linked Operations 
Windows, try the interesting sol.sxo c ol lapsed environment file; notice how 
you can expand on it by using the color channel operations or by inserting 
additional l! he ring operations at various points, 

i >perations (1 liters and Effects) provided by Web AK 

Since Modular Dreams Incorporated continuously seeks to improve its 
products, the operations dialogs shown in this section may be slightly 
d i fferent than those running on your machine and there might also be more of 
Hi cm as added hy future upgrades. How r ever, the behavior and use of the 
actual operations should be similar Lo what is discussed in this section. 

Brightness 

■ El ' B ^^.flglfB — — — — 

Porccii!: -*i mF i-H 

i: | mn‘ | 1 Ajpiji | 

\ j 1 1 us L brig h L [less o f i mage . 



I 'sage: 

I I Vo v hie images in the source and target Image View Canvases, 

- * 1 Specify how much modification is desired using the Percent slider. 

1 I-rss Apply. 
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Combine Color Channels 


M:-*rWe toiT : ii.mim - 1 n ^i njin ch 


Suurrfi Channels ^Dosllnn:!.:.! 



Create an image by merging images which specify its separate colurchan- 
(Mage: 

1 - Provide images in tlic source and target image View Canvases. 

- - Press Apply. (Any unnecessary information in tiic source images will be 
ignored.) 

Contrast 



-Modify contrast of the image. 

Usage: 

1 - Provide images in tire source and target Image View Canvases. 

I - Specily how much change is desired using the Percent slider 
3 - Press Apply, 
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Cropper 



1 Af.pitj I | 

< rop or stamp an image. This operation allows you to cut out a portion of an 
kiiago or to stamp an image onto a larger one. 

E o ose for cropping a larger image into a smaller one: 

1 - Provide the source and target images into the proper Image View Can- 

vases. 

2 - Enter the Offset values. Hie 

offset values indicate at what 
offset from the source image 
should the target be copied 
from. For example, if you 
provide a source which is 200 
by 200 pixels and a Larger 
which is 100 by I Q0, offset of 
values oJ. SO and 50 would 

copy the center 100 by 100 pixels of the source are copied into the target, 

3 - Press Apply to perform the action. 

To use for stamping a smaller image into a iarger one: 

1 - Provide the source and target images into the proper Image View Can- 

vases. 

2 - Enter the Offset values. The 

offset values indicate at what 
offset from the source image 
should the target be copied 
from. For example, if you 
provide a source which is I 00 
by ! 00 pixels and a target 
which is 20 0 by 200, offset of 
values of -50 and -SO would 

copy the source image into the center 100 by [00 pixels of the target, 

2 - Press Apply to perform the action. 




Please note chnl (his operation docs not perform two different tasks. Ji is 
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Enhance Filter 



Enhance image quality specially around edges. 

Usage: 

1 - Provide images in the source and target Image View Canvases. 

2 - Select the Threshold value used to decide which pixels are enhanced. 

3 - Press Apply. 

Equalize Effect 



Equalize image range. An equalized image is the same image expanded to ill! 
tiie full brightness spectrum. Normally, you will only warn to apply this filter 
to an image which should contain both colors White and Black. 

Usage: 

1 - Provide images in the source and target linage View Canvases. 

2 - Press Apply. 

Gamma Adjustment 



Usage: 

1 - Provide images ill die source and target Image View Canvases. 

2 - Select the adjustment Amount 

3 - Press Apply 
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Grayscale Effect 



Make the image grayscale by combining the Red, Green, arid Blue compo- 
nents into one. 


Usage: 

1 - Provide images ill the source and target linage View Canvases. 

2 - Press Apply. 

Histogram Equalization 



Equalize the image histogram and expand it for the range provided 


Usage: 

1 - Provide images in the source and target linage View Canvases. 

2 - Enter die minimum and maximum values , 

} -Press Apply. 

line And Saturation 


S&tUmtiGn: 

LflhlnesB: iJilC 

I Clang I 

Modify image ITSL values. 



I 'sage: 

I I * flOV ide i mages ill t be some e and larg et 1 m age Vi e w Can va ses . 

” I iierease or decrease the ! f SL values by moving the sliders away from the 
center of their range. 

1 he ss Apply. 
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Merger 



Merge two images into one based on a control Linage. 

Usage: 

3 - Provide two images in the source Image View Canvases. One of the 
images will be used for darker pixels and the other for lighter ones, 

2 - Provide an image in the target Image View Canvas. 

3 - Provide an image in the Control Image View Canvas. This image controls 

how the two source images are mixed, A value of 0 (black) means use a 
pixel from Source B and a value of 255 (white) means use a pixel from 
Source W . Values between white and black will result in a mixture of the 
pixels in Source B and Source W. 

4 -Press Apply. 

For example uses of tills Operations Window, resurrect the following col- 
lapsed environment liles: merge l.sxo, merge2.sxo, merge3.sxo ; merge4.sxo r or 
merges. sxo. in each case, once die Tile has been resurrected, either press the 
Apply buttons (if dialogs are opened) or press the Execute button, (only if a 
HcripL window is opened) 
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Mirror Effect 


5-di". IbriiijrM.ai 
* Vflflical 




i Oorvgi I 


I ^ppiy I 


Flip image in the horizontal or vertical direction. 


Usage: 

1 - Provide images in the source and target Image View Canvases. 

2 - ScEeci Hurizmital or Vertical mirroring. 

3 -Press Apply. 


JN eg atc/ln verse Effect 



1 n vert image co iorniap . 

Usage; 

I - Provide images in the source and target Image View Canvases. 
2 -Press Apply, 


Nutate Effect 


mrmmrrr, 

■ii-urcL' A l?!*sl l'i;jl rnn 


[■ Z 1- 1 

kH 

» RgfcJ 

L Anyle:]4!iJG 

1 ''ill'll! | 

LAGEN.J 


lOiiute an Linage ici the clockwise or counterclockwise direction. 


t huge: 

I Provide images in the source and target Image View Canvases. 
' I ■ liter a Veil ue between -360 to 360 for rotation Angle. 

' PnssiApply. 





.'■]h - Modular Dreams MD-i-F Web Animation Kit 


Sharpness Filter 



Sharpen linage. 


Usage: 

1 - Provide images in the source and target Image View Canvases, 

2 - Press Apply. 


Split Color Channels 



Create images by splitting an image into its separate Red, Greer, and Blue 
color channels. 

Usage: 

1 ■ Provide images in the source and target Image View Can vase s. 

2 - Press Apply. (Any unnecessary information in the source images is 
ignored.) 
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Threshold 


Crossover: MB*- — ! ' |'' ' ' 
iuparatc Channels 


m 


Create a Black and White image based on the source images color intensity 
and a cutoff value. 


Usage: 

1 - Provide images in [lie source and target Image View Canvases. 

2 - Provide the Crossover value which indicates the pixel brightness which is 

the crossover from Black to White. 

3 - Select Separate Channels if yon would like WebAK to perform three 

separate threshold operations oil each of the Red, Green, and Blue color 
channels. 

4 - Press Apply. 
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Chapter 7: Pattern Generator 


m 


I ne of the many World Wide Web related features provided by 
MD+F Web AK is the Pa Lie m Generator. The Pattern Generator is 
capable of creating seamless patterns for use as generated or as die 
starting block for you to create your own custom patterns. 



Unlike many other windows in ibis application, you can have only one 
Pattern Generator window open at one time and it may not be collapsed. 

The normal way to store the patterns you create is using the Image Holder 
object, 

Selecting pattern size 

You can entered the desired pattern dimensions in the two entry fields 
labeled Size. Some patterns may have special requirements for Lheir size* - 
for example, they might be required, to he even - so the size you enter might 
be adjusted by the application before generation of the pattern. 

Using an image seed 

If you would like, you can enter a random generator seed value for WebAK 
to use. The seed value will he Used to set the random generator to a specific 
setting so that the sequence of the numbers generated are known. Using an 
Image Seed will allow you generate the same pattern later, assuming you 
also keep the other pattern generator settings the same. 

Normally, this field is blank and a random seed will be used tor each 
Generate operation. 
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Using animation frames 

Since some of the pattern styles are ideal for creating animations, there are 
three fields provided to allow you to specify the Angle* Speed, and Count of 
die objects in some of the pattern styles. When used with any given image 
seed, the Pattern Generator will perform the following actions: 

1 - Create all the random values it needs. 

2 - Modify die random values based on the animation frame values you’ve 

provided. 

3 - Render Lhe final image. 

The actions these three settings perform arc as followed: 

Angle - Specifies the angle rotation frame. The larger this number is, Lhe 
more the objects in the animation frame have rotated. This value is in 
degrees. Any values above 360 are mapped to their eorrespon ding value 
between 0 and 359 . 

Speed - Specifies the speed frame (effects location). The larger this number 
is, the more Lhe objects have moved from their starting position. This 
value does not have a limit. 

Count ■ Specifies the count frame. The Larger ibis value is n the more of the 
items are drawn. This number will range from 1 to the maximum number 
of items specified by the pattern J s density value. 

When LLSitLg the frame values, please notice that they areal they advance at 
the lowest possible increments. For faster animations, you should simply 
skip over Lhe in-between frames, 

For sample animations created using these fields, resurrect the following 
col lapsed environments: pattern l.sxo, pattern2.sxo, ; andpatteml,s?co. 

Generating a pattern 

To generate a pattern, enter its size, select the pattern type from the notebook, 
set its settings (if any), and then press the Generate button. As with all other 
operations in the multitasking MD+F WebAK, the creation will be started as 
a separate task and you may continue using the rest of the application while 
the pattern is being created and displayed. 

Pattern styles 

Since Modular Dreams Incorporated continuously seeks to improve iLs 
products, the patterns style pages shown in this section may be slightly 
different than those running on your machine and (here might also be more of 
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them in your software. However, the behavior and use of the actual style 
pages should be similar to what i> discussed in this section. 

Foil 

The' Foil module creates classic foil paper wrap 
patterns based on the foil style selected thru the 
Style* selection list. The size of the Foil patterns 
generated depend on the image canvas size. The 
only options available for these styles is the colons) of the foil and the 
background, if any. 


F di Attributsc 


styte; jFof.2 

COlCf | ! |g|J 



Coloring; |=xari 


-fi-id Attributes 1 Grid 

aria siz»: h 2 The Grid module creates a wire grid where each cell 

of the grid is cither empty or contains a ball. The 
width of the grids is specified by Lhe Wire Size and 
the size of each of the cells is specified by Grid 
Size. You can select whnt percentage of the grids 
contain balls by using the Filled scrollbar and sc led Lhe coloring scheme 
used Lo paint the balls through the Coloring list. If you would like to use 
specific colorls) instead of the colors in the predefined coloring schemes, 
you use the color option(s) to specify Lhe desired colors and choose Lhe 
Fixed coloring scheme. 


a 


Loops 

The Loops module draws a number of l oops 
(spirals) on the image canvas. You can specify Lhe 
density of lhe drawing by using the Density 
control. You will have very few loops if yon select 
a low density and many if you select a high one. 

Rad ius controls how large each loop is. The loops 
will be colored according to the coloring scheme 
you select in Lhe Coloring list acid the opacity of each loop is selectable 
through the Opacity 7 scrollbar. The less opaque each loop is, the easier it will 
be to see through it. 
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Moire 

The Moire module will draw a simple moire pattern 
consisting of red, green, and blue components. 
"Flic size of the image and the density yon specify 
effect the results. 
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OPC Stars 

The OPC Slurs module paints a blank sky and stars 
similar to those used by the Orion Picture Company 
in their opening animation. You specify' the average 
spacing of the stars in the horizontal and vertical 
directions using the Spacing fields. The Ordering selects how loose or 
ordered the stars are from Lhcir specified locations. A fully ordered image will 
place the stars at equal distances from each other and a fully loose ordering 
wil I allow them to bo placed randomly at any poml in the area specified by 
Spacing. Ry specifying a minimum ordering value of 1 0% or so n you can 
assure that the stars are never placed too dose to each other and never 
touch one and another. The color of the stars and the background are 
specified using the two color buttons. 

Parcel 

The Parquet module creates a tiled pattern by 
dividing the image canvas into four sections of 
equal areas and painting the tiles in pairs. There are 
three tile Textures: [Norm ah Metallic 1, and 
Metallic 2. The Normal texture consists of lines 
drawn paral lei to each other and these lines may be 
straight or curved* as set by the Curvature control. 

The other two texture s 1 Metallic l and Metallic 2 
draw pressed metal textures. Using Tile Mode, you can specify how the files 
are arranged against each other, for example* you can have tiles opposite of 
each other to be mirror imaged or placed the same way. For all three tile 
textures, you can specify the density of the drawings, There are two density 
controls, one for the upper-left and lower-right tiles and the other for the 
upper-right and lower-left ones. There are also two color buttons for the two 
pair of tiles. 


Parquai Attributes 
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Pulsars 

The Pulsars module draws pulsar or disk shaped 
objects. You can specify the density of the drawing 
using the Density button. A higher density means 
a larger number of pulsars are to be painted and a 
lower setting means fewer ate to he painted. The 
Radius setting control si the size of the pulsars, 
which are a 1 1 of the same size. They can be drawn 
at various angles oral! be drawn using a fixed angle 
an d may contain the standard two shooters or a different number of shooters 
(Disc Style). The final selling for pulsars is the Coloring scheme which is 
used when the random pulsar colors are being generated. 


PenEiiu; \ 
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Radial Stars 

The Radial Stars module is similar to the Pulsars 
module. The Density and Radius behave the same 
way in selecting the number of radial stars and their 
size and like the pulsars, you may select. I be radial 
slats to be drawn at Fixed or Random angles. The 
Hearns control selects how many light beams are 
drawn and Flare indicates their thickness and 
spread. A high fiare value will make die radial stars’ 
beams spread from ei round the center (similar to a 
star fish) and a very low flare value will generate very bright and sharp 
heams. The Coloring control select the coloring scheme used when generat- 
ing the random radial star colors. 
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| Kings 

The Kings module paints rings or tubes. The 
Deu si ty control specifies how many rings there ate 
and the Min Radius and Max Radius Limit die range 
of radii used when generating tlie rings. The 
amount of the circle actually drawn into the ring is 
I specified by the Rin^ Pet control. The higher you 
make this value is, the smaller the hole inside of the 
ring will become. The Coloring control selects the coloring scheme used to 
generate the random colors used in painting of the rings. 
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Roils 

I in 1 Nods module paints Neon holered rods. 

ify ill, 1 spacing and strictness of lhe rod 
place me ms using the two Spacing and Strictness 
Helds and the length of the rods using the Length 
c n t ry fie] d . To pai i lI Wh i te melted rods^ sc lect the 
Mel Led button. 


Smut 

1 he Sand module will paint a sand or gravel like 
pattern, usually seen as background on web pages. 

There are three controls used to specify the shape, 
size, and roughness of the pattern and one pair of 
color controls to specify a coloring scheme or a 
single fixed color. If using a single colon the sand 
or gravel items are drawn using the specified color and the background color 
will be black. 
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Sinewave 

The Sinewave modules draws a Sinewave with a 
variety of coloring options. You can specify a 
Horizontal or Vertical wave using Lbe Direction 
radio buttons. You cat] a iso select for there to be 
another wave added your wave by using the Mode 
control. The Frequency and Height fields specify- 
die wave attributes lor the mailt wave and Lhe 
subwave, if any. [f you would Jake only one full 
wave per image canvas width, specify one, else, enter the number of peeks as 
the Frequency. Similarly, if you like the wave’s height to cover the full image 
canvas height, use a Height value of one. A smaller height value will give 
you a much smoother wave and a higher value will make the wave much 
sharpen 1 he Color button specifies the color using while shading the wave 
and the Coloring control specifies how you would like Lhe wave to be 
colored. 


Sinewave Attributes 
Direction; •' HONZCh !al 
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Spheres 

Use the Spheres module to draw colored balls or 
orbs. £ imi lar to other mod u les 1 ike Pul sars or 
Loops, use the Density and Radius controls to 
speei fy how many spheres there are and their 
radius. The Glow setting i& similar to Radius- ft 
specifies the radius of the glow within the sphere. 

If you specify a glow value dose to the sphere's 
radius, you will obtain normally shaded spheres 
and a sm al 1 er g lo w v aiu e will result i n g lowing orbs . A 1 arger glow v a I ue than 
the radius, will generate high -contrast spheres. When painting the objects, 
the Spheres module uses the Flexible setting to decide whether spheres 
redraw 7 over each other or merge together and the Opacity setting to draw 
partially transparent spheres. Finally, the coloring scheme used is specified 
by the Coloring control. 

Stars 

The S tam module will paint dense, cartoon like siar 
fields. Use the Density control Lo indicate how 
dense the star fields are to be drawn. The Drawing 
control allows you toselectDLaiuondorCross 
shaped stars. The coloring of the stars are is 
controls by the three Softness settings. Each of the 
softness bars specifies how little variation can there 
be from pure white for each of Lhe colors. If you set 
all three fields to maximum* you will have all white staraand if you set one or 
more of the Red, Green, or Blue softness controls to a lower value* you will 
have stars randomly colored with the color raging from white to those 
color(s). 




Slrund Attributes Strands 

OaLcr; H i Tb e St ra nd s modal e pai nts sli ghtly wav in g strands 

in Lhe vertical direction. The only control for This 
module is the Color buiLon which specifies the color used to paint the 
Individual sirands. 
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Strings 

The Sitings module paints strings of varying 
length and smoothness. Use the Items field to 
specify the exact number of strings drawn. The two 
Length fields indicate the minimum anti maximum 
string lengths the program will paint. Similarly, the 
two Curvature controls indicate the minimum and 
max i mum anion lit o f c urvn cure al lowed, By using 
these four fields, you can modify the look of the 
strings to mimic objects such as hair (almost identical curvature min and max, 
one color) 01 fibers such as those seen in recycled pa per. (low curvature and 
short lengths, two dark colors) The Co Jur control specifies if you would like 
one color, two colors, or an infinite number of colors- If you decide on an 
infinite number of colors, use die Coloring control to indicate the coloring 
scheme, else, use the color buttons to indicate the fibre colors. Also., use the 
background color button to indicate the background color. 

Weave 

The Weave modules will draw a pair of 3D woven wkw AttriibuieB — - 

ribbons- 1 lie size of the image canvas indicates the C£Tl£,r=: 8H 
density of the weaving as there is only one ribbon 
painted in each direction. The only two options arc the two Colors color 
buttons which specify the ribbon colors. 

Special uses for patterns 

Although the obvious use for the seamless patterns generated by MD+F 
WebAK is creation of webpage backgrounds, there are also great tor other 
special purposes: 

Creation of displacement maps 

If you have a paint program which can displace images based on a control 
image’s brightness, you can use pa l L em* for animated patterns to create 
images whose intensity can be used to displace an image in very interesting 
ways. Resurrect Lhc col lapsed environment file dispmnp.sxo for an example 
of this. 

Creation uf merging maps 

Most paint programs allow merging of two images based on a control merge 
map. Similar to the displacement map mentioned above, the pattern* created 
by WebAK can be used to control merging of two images. Now, ins Lead of 
using a pattern s intensity to dissolve an image, you can fade from an image 
to another using the patterns. Resurrect the collapsed environment file 
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mergmap.sxo for an example of this. 

Fora detailed descripLion of the method and applications tssed for the two 
examples given please visit Modular Dreams Inc.’s Web site at 
w w w.modul ardream s.crnn , We will attem pt to periodica Qy add addi L ional 
examples to out Web pages. 
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Chapter 7: Image Holder 


T 


he image 1 Io Ider i s the si m pi est tool pm vi ded by M D + 1 ■' Web AK. It 
is simply used to hold a number of Image View Canvases. It can 
be used to hold images which yon are working with and would like to 
have aocessabJe without providing for the extra window space taken by 
Editor Windows or it can he used to store a large number of images in one 
file. An example use of Image Holders is the collapsed environment file 
sincs.SKO. When we created these patterns for Web design use, we could 
have stored them one by one but we decided to keep them together in a pair 
of Image Ho [decs. Whenever needed, they can be loaded in one bunch by 
selecting FiloRcsuiTCCt. + . menu item and entering the collapsed 
environment's tile name. 



To use an Image Holder just use its individual Image View Canvases as you 
would normally. 


Changing number oflmage Holder items 


You ean change the size of an Image Holder to increase or decrease die 
muuber of Image View Canvases it holds. You need not w r ony about making 
it too small, if any of your used Image View Canvases are removed, the 
Image Holder will maintain its image and redisplay them when enlarged 
again. 
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< liiiptcr 8 linage Tiler 
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■ililv of the patterns created by the Pattern Generator are seamless 
Isince they am intended to be used in creation of Web page 

^backgrounds. The Image Tiler is a simple tool which will tile an 

image for yon. This way you can clearly see how well your image tdes. 



To use Lbe Image Tiler, specify 1 your source image in the Tile Image View 
Canvas and it will be automatically tiled in the display portion of the window. 

Noier You can link to the Tmagc linage View Canvas and have the tiled 
portion of L he window gel updated automatically as Lhe image changes. 

Looking for trouble spots 

In order to assist you in delecting any problems with your tiles, you can 
configure this too! to apply an edge detection algorithm to the image before 
its shown. You can configure this feature to be applied to the whole r mage or 
just a part of it. This feat Lire will ass 1st >■ ou i n seeing an y ti I ing pro b Ecms by 
highlighting areas surround the rectangular Liles you have created, 

Jfyou need to find out where Lhe edges of the tiles are, press the Show Edges 
button and they will be highlighted fora short period of time. 
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Chapter 9: Imagemap Writer 

D magemaps provide a way Tor a Web page designer to place 1 inks to other 
sites or L'RL accessible files from an Linage. MD+F Web A K ? s Imagemap 
Writer allows you to load in an image, seleeL areas on iL and provide the 
corresponding links and then generate the appropriate style of an imagemap 
file from the provided data. 
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Providing the image 

The first thing you need To do in order to create an Imagemap da La file using 
this tool is to provide it the image you are creating a map for. To do this, 
drag-and-drop or load the image into the Image Image View Canvas. Once 
you do Lbis, the image will also be displayed in the larger working area. 

Painting the link areas 

On an imagemap, areas which are linked arc selected thru basic geometric 
shaped. The WebAK program supports the shapes Rectangle, Circle, and 
Polygon. To create a I ink of any type, press the button containing LbaL shape 
and then draw within the image area. For points which are contained by more 
than one shape, the one that comes first is the one which whose link is 
followed by the Web browser or server. 
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Specifying links 

Once you have drawn your shape, it will be added to the list at the bottom of 
the window. You can then enter the Jink location for that area. Should you 
wish to modify the links for any other area, select it from the list and charge 
the I ink va I ue sho wn for i t . = 

hach area can have one of the two possible link values: 

* A URL link 

■ A no Jink setting. Select this if you want the area to not link to anywhere. 
Voti wil 1 normally do ibis to exclude an area from being processed by the 
default link. The default link is the one that covers all the areas not 
covered by any of file shapes you have drawn. 

Modifying entries 

To modify an entry, simply select it and either redraw iron the image (if yon 
wish to change its shape or coverage) or re-enter the link value (this changes 
its link information) You can also delete the entry you have selected by 
pressing the Delete button. 

Selecting the map file format 

An imagemaps mapping data can be either contained in the HTML Webpage 
which is loaded onto the user’s machine (client side) or be resident on the 
server machine ( server side), You should sped fy the type of the imagemap 
data von want created by using tile Kind selection control. This list also 
contains a third entry to create a tesl file, You can use that to generate a 
complete HTM I. file and test it with a browser running locally 

■'Vote: Some Web Browsers, such as IBM’s Web Explorer, do nor support 
(jlipait s-i-di: Imagemaps. 

Generating a map file 

Once you have finished specifying the links from the image, enter the file 
came into the File Name field and press Generate. This will write the map 
rile out for you to use. You can also create map files on the fly: to do this, 
select the 1 ave Update option. Now. any changes yott make to your links or 
their areas will result in updates to the map tile as they happen.' 
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Chapter 10: Collapse and Resurrect 

M olkpsedenvimfmrient files (5XQ) are Meta-format files used by 

MD+F WebAK for reading and writing groups of objects and llieir 
relationships onto disk. They provide easy means for yon to store or 
share with others Lhe setups you create in order to put together complex CrlF 
animations. 

In order to understand the role of collapsed environment files in WebAK, its 
best to compare them with traditional storage files: 

All applications, including WebAK allow for storage and retrieval of various 
tile formats. In WebAK foe example, you ean store your images using 
standard graphic tile formats (.gif, jpg, ...), store your seripts in standard 
ASCII format (.sxs or .ixl), etc. The reason why all applications provide 
support for these standard file formats is so that the you can save and 
retrieve Lhe same files by different applications; for example creating a 
graphic file rising one pai jlL program and then later modifying it on another. 

In addition Lo sLandard tile formats, WebAK provides the additional file 
format SXQ in order to a How you to store and retrieve objects of varying 
complexity with ease. For example, if you open an Operations Window and 
modify its controls, you can collapse the environment (using 
Fi)e>Objccts>CoJIapse) and reereate the object in the future by resurrecting 
it. 3n such a case, there could have been another file format used; one that 
simply saves Lhe setting of the controls. Now imagine two such Operations 
Windows with the targe l of one linked to the source of the other. Now, using 
a traditional settings file, you could store [tie setting for one, store the setting 
for the oilier but what about the rest of the environment? In order to get 
back to where you where, you would need to reopen the Operations Win- 
dows (i.e. remember which two they were), load Lheir settings into them, and 
link the source and target canvases, (i.e. another tiling to remember) To do 
this the WebAK way. you would have simply collapsed the environment to 
save everything and the next time you needed Lhe same setup, resurrected it 
to bring everything back. And the difficulty stays the same even as the 
setup get more complex, (as opposed to traditional load and save methods 
which would require more files and more steps to fol low ) 

Details of SXO 


The SXO file format stores all MD+F WebAK windows which arc used in 
creation of fill animations. This includes Editor Windows, Operations 
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Windows, Image Holders, GIF Animator, ... What is rol stnrJTTTlTT ' 
gjffi "t 1 ? ,li! '!" l!S “* “ 1* application 

Hlc versions 

WsbAK «■ ** -kta*. it docs 
, ' ^ TSt t I>d tmd 111 “ ke e d»cated guesses for information which it nmk 
hut can not find. I his allows WebA K to load (or load as much of) SXO file, 

Ltr f ^ VeiSl<)1,S 0fthe «*■"»"* also *Zs Modut 

oftlic w- u m ‘ ,re enviro ™«* seU, ngs in die file or modify the some 

Wrt 4 K T *■ mUaTOal ChSRCS ° /makh e older SXO files unusable The 
em ;^ apP Catl0D d(,es ** P"™* AJc version mfomiation when an ' 

Sharing SXO files 

»- *» 

■ The SXO file. 

SEIEJSL" : ,he rT " in yoi,r 

ire ifilin n 4 ' P d ' Ft>l example dl) 1101 ™ a full 1600 bv 1200 display 
if the person you am providing the file to has a 1 024 by 76K display. 

SXO files compress well; You may want to use a tool such as Zin to 
compress them tf you will be sharing them with other thru the 2 S 
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Chapter 1 1 : WebAK Script 



cripts contain simple commands which instruct WebAK, to perform 
tasks. By using scripts, you can create list of actions; A list which 
you can easily modify 1 . Scripts are ideal for automating repetitive tasks. 


WebAK. Script lias been designed to satisfy the needs of the casual user as 
well as computer scientists. In its basic form, you can use simple script 
commands to tell objects which you interact within WebAK' s display to 
perform actions, for example, if yon can use an Editor Window to load an 
image, you can use WebAK Script to tell the Editor Window to load the 
im ace, Generally, there is only one line per command. In its more advanced 
form, the WebAK Script evolves into a C++ style object orient ed program- 
ming language. This section only covers the basic WebAK script: to do 
mote complex tasks, please obtain the WebAK Programmer's Guide from 
Modular Dreams. Incorporated homepage on the Internet at http:// 
www.modulardream s.com . 


The Script Window 

The Script Window can he opened using the U l ililies> Script... menu item. 
This basic window contains a text urea where you can eider your script as 
well as some button and menu items to let you load and save scripts or 
control how their instructions are executed. 


File Ecu serpt 
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croppflr = nRW rrapperWlndaw: 
cropper, source Q .laad{’=D-alLLi±K.L.yif "J : 
cropoer. Large 1 : [] .laadC'fadebg.SJ'"] ! 
merger = new MergarWindow ; 
merger .wtWHiMsjunra (croppflr.targBtO) ; 
mprgRr .blacktiaurceQ .Liad ("tadebg .giF" |i; 
merger .oontrcLCl .(mc ('"FacieS .gir“ ); 
gif Animator = naw <31 FAnimaion 
merger .target^ .Fuse ("racing gir"^: 

cropper. vpfAij 0; 
merger .opplg (); 
for (i-Q: K1BB; 1=1+1) 


copper. 6etr?rigin (Q.i); 
r'cppor. opplg [); 

g'rFjAni malar .addcell (merge- tar^ei O.copuorO, 13C); 


Execute , 
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■ !l * r i|ii i "run wiuls take the same format: 

i >hjt i f \f eflt f}d f Para m efers } ; 

i Object - An object ig Hie Web AX window which is. to perform an action, For 
examp le : Ed itor W indow. Yu u can deri v c the name of an obj ee l by u sing 
whal is shown in its title bar, removing ah spaces, attaching all the words 
and in some cases add mg Lhe word Window to the end. For example 

MD+F WcbAK Brightness will become Bri K btm^ Window and M D+F 
WcbAK Histogram Equalization becomes 
H istograniEq ua Fixation Window. 

Method - A method i s th e a cti on y t ni won Id. like the O bj eet to perform . For 
example, the method “bad” when used with an Editor Window tells it to 
load a file. The command to tell an Editor Window to load a file is 
Editor Winda w. load ( " test.gif') ; 

Parameters - Parameters are the information the action needs to do its job. 

In the example F.dim-Wmdnw, load C 'test gif); Lhc parameter is the file 
name “tesr.gif \ If there ate no parameters, yon should only use empty 
parenthesis and if there is more than one. they should be separated by 
commas. 


Object identifiers 

When you specify an object name such as Editor Window or GIF Animator, 
you are specifying them object by its class. It is perfectly fine to do ibis if 
there is only object of that class open but what if there a re two, like two 
Editor Windows 1 : 1 1 yon use Editor Window for the object name, your actions 
will be performed by the last EditorWindow you opened. If you wish to 
perform actions on both, you will need to give them names. An example of 
names for Editor Windows would be editorWmdowOnc and 
edi tor\V indt r wT wo. I h c n ext sec £i on ta Iks a bo ut how obj cuts a re created, 
and optionally, assigned names. 

Creating objects 

To create objects use Hie Ll new” command: 
new Object; 

An example to open an Editor Window and loud an image into it ls: 


new Editor Window; 

Editor Window, load ("stars. gif' 1 }; 
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To perform the same aeiion as above while giving the object its own unique 
name, you would need to do this: 

s t a rs Edito r Wi n do w = new Edit or Window; 
starsEditorWindow\ had (“stars. gif'); 


Destroying objects 

To destroy objects use die following command: 


delete Object; 


An example to close open Editor Window is: 
del etc Editor Win do w; 

and if the Editor Window has a name, yon can use it. such as: 
delete stars EdiiorWindow; 

Finding out an object’s methods and parameters 

To find out the. actions which an object can perform enter the following 
command: 

Ob ject. help (); 

where Object is a class name. For example, if you want to know that actions 
you can request an Editor Window co perform, you would use; 

Editor Window. help (}: 

and the Editor Window class would list you all the me L bods which it under- 
stands and is capable of performing. 

Parameter types 

As already mentioned, you can have methods which require no parameters, a 
single parameter, or a number of parti meters separated by commas. When 
you request an object to list its methods, you wi 1 1 be presented with a list of 
the methods and the type of parameters they accept. There are many types 
of parameters (discussed in the MD+F WebAK Programmer's Guide) bul the 
ones you will most frequently encounter are: 

Strings - An string is a number of characters enclosed in double quotes, for 
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* Niillijih li .1 j'.il i . i ,h inf 

|llh i" 1 'm i « i 1 ■ ; 1 1 m ., 1 . ■/. fn 4f miinlHM I mi example 200 is an integer. 

1 flMh - ^ 1 1" 1 1 1 * mV (ypr +il ;i ik Limber. Examples of floats are 2Q0 and 200.5. 
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Script writing tips 

The best way to learn WebAK Scripts is finding an already vwitten script 
which performs an action similar to what you want to perform and studying 
its content. [’Ins way, you can not only see how the actions are performed, 
hut you can also make small changes to them to learn even more, All scripts 
f.sxs &X script files) provided on Modular Dream TncZs homepage am 
commented to make it easier for them to be examined and understood. 
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Installation Instruction 


To install: 

1 . Insert the 1 st diskette into the computer’s floppy drive. 

2. Open a Command session. 

3. Run the INST script on the diskette. 

4. Follow on screen instructions and switch diskettes when prompted to do so. 

To execute: 

Once installation is compete, drag the applications icon to your 

desktop. Make sure you create shadow or a short cut to it, not move it. Double click to start the 
application. 

Process Commander users : Do not use Process Commander to terminate WebAK. Doing so may 
freeze the computer in such a way that you will need to power it off and on. If this happens, 
CHKDSK will need to run on all your harddrives. 

SX Paint users : A special version of MD+F SX Paint is included with WebAK 1 . 1 at no cost. This 
special version of SX Paint incorporates WebAK features into it but please note the following: 

1 - WebAK does not support operation slicing. These options are overwritten in this version of SX 
Paint. In addition, the Airbrush and Erase features of SX Paint are currently disabled (accessible by 
using the right mouse button on the Freehand button on the Drawing Tools toolbar). 

2 - WebAK does not require Fix Pack 1 for OS/2 Warp 4. SX Paint does. 

3 - On-line help is only available in WebAK. Please visit Modular Dreams website for upcoming 
information pages on SX Paint. 

4 - WebAK’s collapse and resurrect feature as well as WebAK script automatically expand to support 
the Operation Windows (filters and effects) available in SX Paint, however, you should not depend 
on this feature since they are foreign to WebAK if someone uses your scripts or collapsed environ- 
ment files with it. 

5 - SX Paint puts OS/2 Warp’s advanced multitasking to great use. If you are going to be creating a 
large number of tasks using it, please make sure the THREAD=Numberand FILES=Number 
statements in your CONFIG.SYS are large enough to support SX. 

SX Paint users : We would love to hear any suggestions you may have to improve this product. 

Please use the forms at http://www.modulardreams.com/sx_development.htmI which allows us to 
properly maintain the issues and suggestions you provide. A demo of SX Paint was released on 
September 1 8th 1996 and it has only been used for MD+F internal use until July 1 st 1 996. We 
expect to be making major upgrades to SX Paint on the MD+F Webpage in the near future. 

Thank you for supporting OS/2 and OS/2 developers. 
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